<template>
    <div id="login">
        <div class="top" :style="{'backgroundImage': `url('${require('~/image/login_back.png')}')`}">
            <div class="top-wrap">
                <div class="top-wrap">
                    <div class="outCircle" :style="{'backgroundImage': `url('${require('~/image/outCircle.png')}')`}"></div>
                    <div class="middleCircle" :style="{'backgroundImage': `url('${require('~/image/middleCircle.png')}')`}"></div>
                    <div class="inlineCircle" :style="{'backgroundImage': `url('${require('~/image/inlineCircle.png')}')`}"></div>
                    <div class="logo" :style="{'backgroundImage': `url('${require('~/image/logo.png')}')`}"></div>
                </div>
            </div>
        </div>
        <div class="bottom">
            <div class="form-wrap">
                <div class="inline-container">
                    <div class="input-wrap">
                        <i class="iconfont icon-denglu-ren"></i>
                        <input type="tel" class="tel" name="tel" id="phone" placeholder="请输入用户名/手机号" maxlength="11">
                    </div>
                    <div class="input-wrap">
                        <i class="iconfont icon-denglu-mima"></i>
                        <input type="password" class="pwd" name="pwd" id="passowrd" placeholder="请输入6-16位密码">
                    </div>
                    <div id="submit">登录</div>
                    <div class="aui-content-padded">
                        <label><input class="aui-checkbox" type="checkbox" name="demo1"></label><span class="agreementTxt">同意<a class="agreementHref" @click="turnToAggrement">《云丁平台用户协议》</a></span>
                    </div>
                </div>
            </div>
        </div>
        <div class="forgetPassword">
            <p class="forget" @click="back">忘记密码?</p>
        </div>
    </div>
</template>

<script>

export default {
    data () {
        return {
        };
    },

    components: {},

    computed: {},

    mounted() {},

    methods: {
      back() {
        this.$router.push({name: 'forget'});
      },
    
      turnToAggrement() {
          this.$router.push({name: 'agreement'});
      }
    }
};

</script>
<style lang='stylus' scoped>
#login
    position relative
    .top
        background-repeat no-repeat
        background-size cover
        background-position 50%
        width 750px
        height 481px
        display flex
        display -webkit-flex
        justify-content center
        align-items center
        -webkit-align-items center
        -webkit-justify-content center
        .top-wrap
            width 350px
            height 350px
            position relative
            >div
                background-repeat no-repeat
                background-size cover
                background-position center
            .outCircle
                width 100%
                height 100%
                // background url('/static/image/outCircle.png') no-repeat 50%/cover
                animation circle 6s linear infinite
            .middleCircle
                position absolute
                width 220px
                height 220px
                left 65px
                top 65px
                // background url('/static/image/middleCircle.png') no-repeat 50%/cover
                animation circle-pop 8s linear infinite
            .inlineCircle
                position absolute
                width 160px
                height 160px
                top 95px
                left 95px
                // background url('/static/image/inlineCircle.png') no-repeat 50%/cover
                animation circle 14s linear infinite
            .logo
                position absolute
                width 80px
                height 80px
                top 135px
                left 135px
                // background url('/static/image/logo.png') no-repeat 50%/cover
    .bottom
        width 100%
        .form-wrap
            width 683px
            height 65vh
            margin 0 auto
            border-radius 19px
            margin-top -60px
            background #fff
            box-shadow 0 2px 4px #D6D6D6
            padding-top 10vh
            display flex
            display -webkit-flex
            justify-content center 
            -webkit-justify-content center
            align-items center
            -webkit-align-items center
            .inline-container
                width 506px
                margin 0 auto
                overflow hidden
                padding-top 20px
                input 
                    outline none
                    border none
                    width 100%
                    font-weight 300
                    font-size 30px
                    padding-left 80px
                    -webkit-appearance none
                    line-height nomal
                .input-wrap
                    border-bottom 1px solid #C2C1C1
                    position relative
                    i
                        position absolute
                        padding-top 20px
                        color #C2C1C1
                        left 10px
                    &:first-child
                        margin-top 20px
                #submit
                    background rgb(0,178,187,1)
                    width 100%
                    height 100px
                    color #fff
                    font-weight 300
                    display flex
                    display -webkit-flex
                    justify-content center 
                    -webkit-justify-content center
                    align-items center
                    -webkit-align-items center
                    font-size 35px
                    border-radius 60px
                    margin-top 100px
                    margin-bottom 10px
    .forgetPassword
        position absolute
        font-weight 300
        color #C2C1C1
        text-align center
        width 100%
        bottom 50px
        p
            margin 0px
            padding 0px
            width auto
            font-size 30px
    .agreementTxt
        margin-left 2vw
        font-size 22px
        line-height 22px
        position relative
        top 2px
        a
            color #05BAC5 !important
@keyframes circle 
    0%
        transform rotate(0deg)
    100%
        transform rotate(360deg)
@keyframes circle-pop
    0%
        transform rotate(0deg)
    100%
        transform rotate(-360deg)
</style>